<template>
  <view>
    <u-picker :show="visible" :columns="columns" keyName="label" @cancel="visible = false" @confirm="confirm" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        columns: [],
        callback: null
      }
    },
    mounted() {
      this.$api.store.lookup()
      .then(res => {
        this.columns = [Object.keys(res.data).map((a) => {
          return {
            id: a,
            label: res.data[a]
          }
        })]
      })
    },
    methods: {
      open(cb) {
        this.callback = cb;
        this.visible = true
      },
      confirm (val) {
        this.visible = false
        this.callback({
          storeName: val.value[0].label,
          storeId: val.value[0].id
        })
      },
      cancel () {
        this.visible = false
        this.callback(false)
      }
    },
  }
</script>

<style lang="scss" scoped>
</style>